<template>
  <div class="zong">
    <van-nav-bar title="京东登录" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <div class="fromm">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="telcode" name="telcode" label="请输入验证码" placeholder=""
            :rules="[{ pattern, message: '请输入正确内容' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
      <!-- <van-button round type="default" @click="fs">默认按钮</van-button> -->
      <button class="bb" @click="fs" v-if="star">默认按钮

      </button>
      <button class="bb" v-else>
        <van-count-down :time="time" @finish="star = true" format=" ss 秒" />
      </button>
    </div>


  </div>
</template>

<script setup lang='ts'>

import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { Dialog } from 'vant';
import { yzm } from '@/api/yam'
import { yanzhengma } from '@/api/yzm'
import { useUserStore } from '@/store/userstore';
const star = ref(true)
const useStore = useUserStore();
console.log(11, useStore.userId);
const time = ref(5 * 1000);
const router = useRouter()
const telcode = ref('')
const pattern = /^[0-9]{5}$/;

const onSubmit = () => {
  // console.log(values);
  yzm({
    tel: useStore.userId,
    telcode: telcode.value
  }).then((res: any) => {
    console.log(res);
    if (res.code == '200') {
      Dialog.alert({
        title: '提示',
        message: '继续注册',

      })
      router.push('/register/mm')
    } else if (res.code == '10007') {
      Dialog.alert({
        title: '提示',
        message: '验证码错误',

      })

    }
  })
}
const fs = () => {
  star.value = false
  yanzhengma({
    tel: useStore.userId
  }).then((res: any) => {
    // console.log(event);

    console.log(res);

    if (res.code == '200') {

      let count = 5
      setTimeout(() => {
        count--
        if (count == 0) {
          // clearInterval();
        }
      }, 60000);


    }
  })
}
</script>
<style lang="scss" scoped>
// .van-cell-group{
//     display: flex;

// }
// .fromm{
//     display: flex;
//     align-items: center;
// }
.zong {
  position: relative;

  .bb {
    position: absolute;
    top: 52px;
    right: 10px;
    width: 70px;
    height: 30px;
    border-radius: 15px;
    font-size: 10px;
    border: none;
    background-color: red;
    color: #fff;
  }
}
</style>